<template>
  <div class="zjb_ke">
    <!-- 课程订单布局开始 -->
    <div class="zjb_hear">
      <!-- 头部布局开始 -->
      <van-icon name="arrow-left" size="40" @click="go" />
      <p>课程订单</p>
      <!-- 头部布局结束 -->
    </div>
    <div class="zjb_nav">
      <!-- 头部导航布局开始 -->
      <ul>
        <li v-for="(v,i) in nav" :key="i" :class="{ac_aa:num==i}" @click="xuan(i)">{{v}}</li>
      </ul>
      <!-- 头部导航布局结束 -->
    </div>
    <div class="con">
  
      <ul>
        <li v-for="(v,i) in list" :key="i" v-show="num==0">
          <p>
            订单编号：{{v.order_number}}
            <span v-show="v.order_status==2">交易完成</span>
          </p>
          <p>{{v.title}}</p>
          <p>时间：{{v.created_at|timer}}</p>
          <p>实付款：{{v.order_price}}</p>
        </li>
        <li  v-show="num==1" class="two">
           <div>
            <img src="../../../static/study-img/288915.jpg" alt="">
            <p>暂无订单</p>
           </div>
        </li>
        <li  v-show="num==2" v-for="(v,i) in list" :key="i">
           
            <p>
            订单编号：{{v.order_number}}
            <span v-show="v.order_status==2">交易完成</span>
          </p>
          <p>{{v.title}}</p>
          <p>时间：{{v.created_at|timer}}</p>
          <p>实付款：{{v.order_price}}</p>
        </li>
        <li  v-show="num==3"  class="two">
            <div>
            <img src="../../../static/study-img/288915.jpg" alt="">
            <p>暂无订单</p>
           </div>
        </li>
      </ul>
    </div>

    <!-- 课程订单布局结束 -->
  </div>
</template>

<script>
export default {
  name: "Ke",
  data() {
    return {
      nav: ["全部订单", "待支付", "已完成", "已取消"],
      num: 0,
      list: [],
    
    };
  },
  methods: {
    xuan(i) {
      //-->点击导航，切换
      this.num = i;
    },
    go() {
      //-->返回上一页
      this.$router.go(-1);
    }
  },
  mounted() {
    var token = this.$store.state.User.token;
    this.axios
      .post(
        "https://www.365msmk.com/api/app/myOrder",
        {
          limit: 10,
          order_status: 0,
          order_type: 2,
          page: 1
        },
        { headers: { Authorization: "Bearer " + token } }
      )
      .then(res => {
        console.log(res);
        this.list = res.data.data.list;
      });
  },
  filters: {
    timer(val) {
      //--->val就是时间的毫秒数
     var a=new Date(val*1000);
     var b=a.getHours()+':'+(a.getMinutes()<10?a.getMinutes()+'0':a.getMinutes());
     return b;
    }
  }
};
</script>

<style scoped lang="scss">
.con{
    width: 100%;
    height: 100%;
    margin-top: .2rem;
    ul{
        padding: 0 .2rem;
        li{
            // border: 1px solid #000;
            padding: 0.1rem .2rem .2rem;
            font-size: .2rem;
            margin-top: .2rem;
            border-radius: .16rem;
            box-shadow: .04rem .04rem .04rem #ccc,-.04rem -.04rem .04rem #ccc;
            &>p:nth-child(1){
                margin: .2rem 0 .3rem;
                &>span{
                     margin-left: 1.4rem;
                     color: orange;
                }
               
            }
            &>p:nth-child(3){
                margin: .1rem 0 .1rem;
            }
           
        }
        .two{
            border: none;
            text-align: center;
            box-shadow: 0 0 0 #fff;
           &>div{
                &>img{
                width: 2rem;
                height: 2rem;
            }
            &>p{
                margin-top: .2rem;
                font-size:.2rem;
                color: #ccc;
            }
           }
        }
    }
}
.zjb_nav {
  //--->导航条
  height: 0.8rem;
  font-size: 0.24rem;
  line-height: 0.8rem;
  ul {
    padding: 0 0.2rem;
    display: flex;
    align-items: center;
    li {
      width: 25%;
      text-align: center;
      border-bottom: 1px solid #ccc;
    }
    .ac_aa {
      color: orange;
      border-bottom: 2px solid red;
    }
  }
}
.zjb_ke {
  width: 100%;
  height: 100%;
  .zjb_hear {
    //头部
    height: 0.6rem;
    width: 6rem;
    display: flex;
    padding: 0 0.2rem;
    align-items: center;
    & > p {
      font-size: 0.24rem;
      width: 5.4rem;
    //   border: 1px solid #000;
      text-align: center;
    }
  }
}
</style>